<template>
	<view>
		<view class="column-css view-cente">
			<view class="row-css" style="justify-content: space-between;padding: 20rpx 0; border-bottom: 1rpx dashed #EEEEEE;">
				<view>车辆：{{ vehicleNo }}</view>
				<view style="color: #2B7CFF;" @click="onReporthistory">查看上报历史</view>
			</view>
			<view class="column-css" style="padding: 30rpx 0;">
				<view class="row-css" style="align-items: center;">
					<view class="view-rodio" style="background: #81D588;"></view>
					{{ shippingCity }}
				</view>
				<view class="line"></view>
				<view class="row-css" style="align-items: center;">
					<view class="view-rodio" style="background: #FB8536;"></view>
					{{ receiptCity }}
				</view>
			</view>
		</view>

		<view class="column-css" style="margin-top: 20rpx; padding: 20rpx 30rpx;background: #FFFFFF;">
			<view style="padding: 10rpx 0;">问题描述</view>
			<view style="border: 1rpx solid #EEEEEE;"><textarea v-model="msg" placeholder="请输入当前遇到的问题" /></view>
		</view>
		<view class="column-css" style="background: #FFFFFF;margin: 20rpx 0;">
			<robby-image-upload
				v-model="imageData"
				:enable-del="true"
				:enable-add="true"
				:enable-drag="false"
				:form-data="formData"
				:header="header"
				:limit="5"
				:showUploadProgress="false"
				@delete="deleteImage"
				@add="addImage"
				:server-url-delete-image="serverUrlDeleteImage"
				:server-url="serverUrl"
			></robby-image-upload>
		</view>
		<view class="view-button" style="flex: 1;background: #2B7CFF;" @click="onResave()">提交</view>
	</view>
</template>

<script>
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
export default {
	components: { robbyImageUpload },
	data() {
		return {
			waybillinfo: {},
			billNo: '',
			vehicleNo: '',
			shippingCity: '',
			receiptCity: '',
			msg: '',
			imageData: [],
			uploadPictures: [],
			serverUrl: this.API + '/driverService/upload',
			serverUrlDeleteImage: '',
			formData: {
				fileType: '8',
				phoneNumber: uni.getStorageSync(this.DATA_KEY.userInfo).mobile,
				fileId: Math.floor(Math.random() * 1259),
				ocrOrNot: '0',
				orderId: this.loadingOrderId
			},
			header: {
				'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
				Authorization: uni.getStorageSync(this.DATA_KEY.token)
			}
		};
	},
	methods: {
		deleteImage: function(e) {
			console.log('的点点滴滴多多多多多多多多', e);
			this.uploadPictures = e.allImages;
		},
		addImage: function(e) {
			console.log('的点点滴滴多多多多多多多多', e);
			this.uploadPictures = e.allImages;
			// console.log('sddddddddddddd=============', e.allImages);
		},
		onResave() {
			this.wxRequest({
				url: `${this.API}/miniApp/loadingOrderReport/saveLoadingOrderReport`,
				// url:
				// 	`${this.API}/miniApi/loadingOrderReport/saveLoadingOrderReport?billNo=` +
				// 	this.billNo +
				// 	'&vehicleNo=' +
				// 	this.vehicleNo +
				// 	'&msg=' +
				// 	this.msg +
				// 	'&uploadPictures=' +
				// 	this.uploadPictures,
				method: 'POST',
				data: {
					loadingOrderId: this.waybillinfo.loadingOrderId,
					billNo: this.billNo,
					vehicleNo: this.vehicleNo,
					msg: this.msg,
					uploadPictures: this.uploadPictures.toString()
				},
				title: '加载中...',
				success: res => {
					uni.showToast({
						title: '异常上报成功！',
						icon: 'none'
					});
					uni.navigateTo({
						url: `../personal/reporthistory?billNo=` + this.billNo
					});
				}
			});
		},
		onReporthistory() {
			uni.navigateTo({
				url: `../personal/reporthistory?billNo=` + this.billNo
			});
		}
	},
	onLoad: function(options) {
		this.waybillinfo = JSON.parse(options.data);
		this.billNo = this.waybillinfo.billNo;
		this.vehicleNo = this.waybillinfo.vehicleNo;
		this.shippingCity = this.waybillinfo.shippingCity;
		this.receiptCity = this.waybillinfo.receiptCity;
	}
};
</script>

<style>
page {
	font-size: 30rpx;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}
.view-rodio {
	display: flex;
	width: 15rpx;
	height: 15rpx;
	margin: 7.5rpx;
	border-radius: 50%;
}

.line {
	background-color: #d9d9d9;
	margin-left: 14rpx;
	height: 50rpx;
	width: 1rpx;
}
.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}
.view-button {
	display: flex;
	flex: 1;
	background: #fb8536;
	border-radius: 5rpx;
	padding: 20rpx;
	margin: 30rpx;
	justify-content: center;
	color: #ffffff;
}
</style>
